<template>
  <div class="songItem">
    <div class="index"><slot></slot></div>
    <div class="left">
      <h3 v-html="$options.filters.highLight(item.name, keywords)"></h3>

      <p>
        <span></span>
        <template v-if="item.song">
          {{ item.song.artists[0].name }}
        </template>
        <template v-if="item.artists">
          {{ item.artists[0].name }}
        </template>
        - {{ item.name }}
      </p>
    </div>
    <span class="playbtn" @click="play(item)"></span>
  </div>
</template>
<script>
export default {
  name: "SongItem",
  props: ["item", "keywords", "num"],
  methods: {
    play(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      let newArr = this.$root.musicStore.musicList;
      let find = false;
      for (let n of newArr) {
        if (n.id == item.id) {
          find = true;
        }
      }
      if (!find) this.$root.musicStore.musicList.push(item);
      this.$emit("add-list");
    },
  },
  filters: {
    highLight(val, keywords) {
      if (typeof keywords == "undefined") {
        return val;
      }
      let reg = new RegExp(keywords, "g");
      if (reg.test(val)) {
        return val.replace(
          reg,
          '<span style="color:#0c73c2">' + keywords + "</span>"
        );
      }
      return val;
      //return "<span>"+val+"</span>"+keywords;
    },
  },
};
</script>
<style lang="less" scoped>
.songItem {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 6px 0px;
  .left {
    flex: 1;
    h3 {
      color: #333;
      font-size: 17px;
      height: 22px;
      overflow: hidden;
    }
    p {
      color: #aaa;
      font-size: 12px;
      height: 16px;
      overflow: hidden;
      span {
        display: inline-block;
        height: 8px;
        width: 12px;
        background: url(../assets/index_icon_2x.png) no-repeat 0px 0px;
        background-size: 166px 97px;
      }
    }
  }
  .playbtn {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../assets/index_icon_2x.png) no-repeat -24px 0px;
    background-size: 166px 97px;
  }
}
a {
  text-decoration: none;
  color: #aaa;
}
</style>